<template>
  <view class="header-box" :style="styles">
    <!-- #ifndef MP-WEIXIN -->
    <view class="header-left" @click="goBack">
      <uni-icons type="left" :color="iconColor" size="25"></uni-icons>
    </view>
    <!-- #endif -->
    <view class="header-center" >
    <slot name="center"></slot>

      <text v-if="title">{{ title }}</text>
    </view>
    <view class="header-right" @click="subtitleClick" v-if="subtitle">{{subtitle}}</view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, ref} from "vue";
const emit = defineEmits(["go-back", "on-right"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  subtitle: {
    type: String,
    default: "",
  },
  iconColor: {
    type: String,
    default: "",
  },
  styles: {
    type: String,
    default: "",
  },
});


function goBack() {
  uni.navigateBack({
    delta: 1, // 返回的页面数，这里表示返回上一页
  });
}
function subtitleClick() {
  emit("on-right");
}

onMounted(() => {
})
</script>

<style scoped lang="less">
.header-box {
  position: fixed;
  top: 0;
  display: flex;
  flex-flow: row nowrap;
  /* #ifndef MP-WEIXIN */
  justify-content: space-between;
  /* #endif */

  /* #ifdef MP-WEIXIN */
  justify-content: center;
  /* #endif */

  align-items: center;
  height: 100rpx;
  width: 100vw;
  z-index: 1001;
  background-color: #F7F8FD;
  .header-left {
    padding-left: 20rpx;
    height: 40rpx;
  }
  .header-center {
    color: #ffffff;
    font-size: 32rpx;
    font-family: "ali-m";
    text-align: center;
  }
  .header-right {
    color: #ffffff;
    font-size: 32rpx;
    font-family: "ali";
    text-align: center;
    font-weight: 500;
    padding-right: 15rpx;
    height: 40rpx;
  }
  &.max {
    height: 20vh;
    background: @mutual-img;
    background-size: 100% 100%;
  }
}
</style>
